<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#222" media="(prefers-color-scheme: dark)"><meta name="generator" content="Hexo 5.2.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha256-xejo6yLi6vGtAjcMIsY8BHdKsLg7QynVlFMzdQgUuy8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"gz1234.gitee.io","root":"/","images":"/images","scheme":"Gemini","darkmode":true,"version":"8.12.3","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":true,"style":"flat"},"bookmark":{"enable":true,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>

    <meta property="og:type" content="website">
<meta property="og:title" content="郭泽">
<meta property="og:url" content="https://gz1234.gitee.io/page/5/index.html">
<meta property="og:site_name" content="郭泽">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="郭泽">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="https://gz1234.gitee.io/page/5/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":true,"isPost":false,"lang":"zh-CN","comments":"","permalink":"","path":"page/5/index.html","title":""}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>郭泽</title>
  





  <noscript>
    <link rel="stylesheet" href="/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">郭泽</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-overview-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">郭泽</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">54</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">21</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">51</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner index posts-expand">

    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E9%9D%A2%E8%AF%95%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E9%9D%A2%E8%AF%95%E9%A2%98/" class="post-title-link" itemprop="url">数据结构和算法面试题</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-29 11:09:28" itemprop="dateCreated datePublished" datetime="2020-10-29T11:09:28+08:00">2020-10-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-07-11 09:23:24" itemprop="dateModified" datetime="2022-07-11T09:23:24+08:00">2022-07-11</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端面试题</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%9F%BA%E7%A1%80%E9%9D%A2%E8%AF%95%E9%A2%98/" class="post-title-link" itemprop="url">计算机基础面试题</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-29 11:09:28" itemprop="dateCreated datePublished" datetime="2020-10-29T11:09:28+08:00">2020-10-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-07-11 09:23:24" itemprop="dateModified" datetime="2022-07-11T09:23:24+08:00">2022-07-11</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端面试题</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/29/js-codeSnippet/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/29/js-codeSnippet/" class="post-title-link" itemprop="url">js 代码片段实现</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-29 11:05:28" itemprop="dateCreated datePublished" datetime="2020-10-29T11:05:28+08:00">2020-10-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-06-30 17:45:22" itemprop="dateModified" datetime="2023-06-30T17:45:22+08:00">2023-06-30</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/js-%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5%E5%AE%9E%E7%8E%B0/" itemprop="url" rel="index"><span itemprop="name">js 代码片段实现</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="做一个-PC-端的网页，设计图是-1920X1080，要在常见屏上显示正常-，比如：1280X720-1366X768-1440X900-1920X1080。就要使用-REM，width、height、margin、padding、left、top-都采用了-REM"><a href="#做一个-PC-端的网页，设计图是-1920X1080，要在常见屏上显示正常-，比如：1280X720-1366X768-1440X900-1920X1080。就要使用-REM，width、height、margin、padding、left、top-都采用了-REM" class="headerlink" title="做一个 PC 端的网页，设计图是 1920X1080，要在常见屏上显示正常 ，比如：1280X720 1366X768 1440X900 1920X1080。就要使用 REM，width、height、margin、padding、left、top 都采用了 REM"></a>做一个 PC 端的网页，设计图是 1920X1080，要在常见屏上显示正常 ，比如：1280X720 1366X768 1440X900 1920X1080。就要使用 REM，width、height、margin、padding、left、top 都采用了 REM</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params">win</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> tid;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">refreshRem</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> designSize = <span class="number">1920</span>; <span class="comment">// 设计图尺寸</span></span><br><span class="line">    <span class="keyword">let</span> html = <span class="built_in">document</span>.documentElement;</span><br><span class="line">    <span class="keyword">let</span> wW = html.clientWidth; <span class="comment">// 窗口宽度</span></span><br><span class="line">    <span class="keyword">let</span> rem = (wW * <span class="number">100</span>) / designSize;</span><br><span class="line">    <span class="built_in">document</span>.documentElement.style.fontSize = rem + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  win.addEventListener(</span><br><span class="line">    <span class="string">&quot;resize&quot;</span>,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">clearTimeout</span>(tid);</span><br><span class="line">      tid = <span class="built_in">setTimeout</span>(refreshRem, <span class="number">300</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="literal">false</span></span><br><span class="line">  );</span><br><span class="line">  win.addEventListener(</span><br><span class="line">    <span class="string">&quot;pageshow&quot;</span>,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">if</span> (e.persisted) &#123;</span><br><span class="line">        <span class="built_in">clearTimeout</span>(tid);</span><br><span class="line">        tid = <span class="built_in">setTimeout</span>(refreshRem, <span class="number">300</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="literal">false</span></span><br><span class="line">  );</span><br><span class="line"></span><br><span class="line">  refreshRem();</span><br><span class="line">&#125;)(<span class="built_in">window</span>);</span><br></pre></td></tr></table></figure>

<p>计算 font-size 的逻辑是：<br>当设计图是 1920 时,规定 HTML 的 FONT-SIZE 的值是 100. 也就是,当浏览器窗口调整到 1920PX 时,1REM=100PX,如果要设定一个 160PX(1920 设计图时)的 margin-top,那么 REM 设置值是 1.6rem.</p>
<p><a target="_blank" rel="noopener" href="https://github.com/995231030/autofit.js">scale方案</a></p>
<h2 id="深拷贝"><a href="#深拷贝" class="headerlink" title="深拷贝"></a>深拷贝</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">deepClone</span>(<span class="params">origin, hashMap = <span class="keyword">new</span> <span class="built_in">WeakMap</span>()</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (origin == <span class="literal">undefined</span> || <span class="keyword">typeof</span> origin !== <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> origin;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">if</span> (origin <span class="keyword">instanceof</span> <span class="built_in">Date</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Date</span>(origin);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">if</span> (origin <span class="keyword">instanceof</span> <span class="built_in">RegExp</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">RegExp</span>(origin);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> hashKey = hashMap.get(origin);</span><br><span class="line">  <span class="keyword">if</span> (hashKey) &#123;</span><br><span class="line">    <span class="keyword">return</span> hashKey;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> target = <span class="keyword">new</span> origin.constructor();</span><br><span class="line">  hashMap.set(origin, target);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">const</span> k <span class="keyword">in</span> origin) &#123;</span><br><span class="line">    <span class="keyword">if</span> (origin.hasOwnProperty(k)) &#123;</span><br><span class="line">      target[k] = deepClone(origin[k]);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> target;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">      <span class="comment">// 判断数据是否是复杂类型</span></span><br><span class="line">      <span class="keyword">if</span> (obj <span class="keyword">instanceof</span> <span class="built_in">Object</span>) &#123;</span><br><span class="line">        <span class="comment">//判断数据是否是数组</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">Array</span>.isArray(obj)) &#123;</span><br><span class="line">          <span class="comment">//声明一个空数组来接收拷贝后的数据</span></span><br><span class="line">          <span class="keyword">let</span> result = []</span><br><span class="line">          obj.forEach(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="comment">// 需要递归深层遍历，否则复制的是地址</span></span><br><span class="line">            result.push(fn(item))</span><br><span class="line">          &#125;)</span><br><span class="line">          <span class="comment">// 返回输出这个数组,数组拷贝完成</span></span><br><span class="line">          <span class="keyword">return</span> result</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="comment">//如果是对象,就声明一个空对象来接收拷贝后的数据</span></span><br><span class="line">          <span class="keyword">let</span> result = &#123;&#125;</span><br><span class="line">          <span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> obj) &#123;</span><br><span class="line">            <span class="comment">// 使用递归深层遍历</span></span><br><span class="line">            result[k] = fn(obj[k])</span><br><span class="line">          &#125;</span><br><span class="line">          <span class="comment">// 返回输出这个对象,对象拷贝完成</span></span><br><span class="line">          <span class="keyword">return</span> result</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// 简单数据类型则直接返回输出</span></span><br><span class="line">      <span class="keyword">return</span> obj</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<h2 id="js-原有的-toFixed-函数得到结果并非-想要的-需要自己重新定义"><a href="#js-原有的-toFixed-函数得到结果并非-想要的-需要自己重新定义" class="headerlink" title="js 原有的 toFixed 函数得到结果并非 想要的 需要自己重新定义"></a>js 原有的 toFixed 函数得到结果并非 想要的 需要自己重新定义</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">toFixed</span>(<span class="params">number, m</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> number !== <span class="string">&quot;number&quot;</span>) &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">TypeError</span>(<span class="string">&quot;number不是数字&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> result = <span class="built_in">Math</span>.round(<span class="built_in">Math</span>.pow(<span class="number">10</span>, m) * number) / <span class="built_in">Math</span>.pow(<span class="number">10</span>, m);</span><br><span class="line">  result = <span class="built_in">String</span>(result);</span><br><span class="line">  <span class="keyword">if</span> (result.indexOf(<span class="string">&quot;.&quot;</span>) == -<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (m != <span class="number">0</span>) &#123;</span><br><span class="line">      result += <span class="string">&quot;.&quot;</span>;</span><br><span class="line">      result += <span class="keyword">new</span> <span class="built_in">Array</span>(m + <span class="number">1</span>).join(<span class="string">&quot;0&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> arr = result.split(<span class="string">&quot;.&quot;</span>);</span><br><span class="line">    <span class="keyword">if</span> (arr[<span class="number">1</span>].length &lt; m) &#123;</span><br><span class="line">      arr[<span class="number">1</span>] += <span class="keyword">new</span> <span class="built_in">Array</span>(m - arr[<span class="number">1</span>].length + <span class="number">1</span>).join(<span class="string">&quot;0&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    result = arr.join(<span class="string">&quot;.&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/10/29/js-codeSnippet/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/react%E9%9D%A2%E8%AF%95%E9%A2%98/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/29/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/react%E9%9D%A2%E8%AF%95%E9%A2%98/" class="post-title-link" itemprop="url">react面试题</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-29 11:05:28" itemprop="dateCreated datePublished" datetime="2020-10-29T11:05:28+08:00">2020-10-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-04-27 09:11:48" itemprop="dateModified" datetime="2023-04-27T09:11:48+08:00">2023-04-27</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/" itemprop="url" rel="index"><span itemprop="name">前端面试题</span></a>
        </span>
          ，
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="state-如何注入组件，从-redux-到组件经历的过程"><a href="#state-如何注入组件，从-redux-到组件经历的过程" class="headerlink" title="state 如何注入组件，从 redux 到组件经历的过程"></a>state 如何注入组件，从 redux 到组件经历的过程</h2><h2 id="react-最新的生命周期"><a href="#react-最新的生命周期" class="headerlink" title="react 最新的生命周期"></a>react 最新的生命周期</h2><p>React 16 之后有三个⽣命周期被废弃(但并未删除)</p>
<ul>
<li>componentWillMount</li>
<li>componentWillReceiveProps</li>
<li>componentWillUpdate<br>计划在 17 版本完全删除这三个函数，只保留 UNSAVE_前缀的三个函数，⽬的是为了向下兼容，但是对于开发者⽽⾔应该尽量避免使⽤他们，⽽是使⽤新增的⽣命周期函数替代它们</li>
</ul>
<p>最新的⽣命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段</p>
<ul>
<li>挂载阶段<ul>
<li>constructor: 构造函数，最先被执⾏,我们通常在构造函数⾥初始化 state 对象或者给⾃定义⽅法绑定 this</li>
<li>getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState) ,这是个静态⽅法,当我们接收到新的属性想去修改我们 state，可以使⽤ getDerivedStateFromProps</li>
<li>render: render 函数是纯函数，只返回需要渲染的东⻄，不应该包含其它的业务逻辑,可以返回原⽣的 DOM、React 组件、Fragment、Portals、字符串和数字、Boolean 和 null 等内容</li>
<li>componentDidMount: 组件装载之后调⽤，此时我们可以获取到 DOM 节点并操作，⽐如对 canvas，svg 的操作，服务器请求，订阅都可以写在这个⾥⾯，但是记得在 componentWillUnmount 中取消订阅</li>
</ul>
</li>
<li>更新阶段<ul>
<li>getDerivedStateFromProps: 此⽅法在更新个挂载阶段都可能会调⽤</li>
<li>shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState) ,有两个参数 nextProps 和 nextState，表示新的属性和变化之后的 state，返回⼀个布尔值，true 表示会触发重新渲染，false 表示不会触发重新渲染，默认返回 true,我们通常利⽤此⽣命周期来优化 React 程序性能</li>
<li>render: 更新阶段也会触发此⽣命周期</li>
<li>getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState) , 这 个 ⽅ 法 在 render 之 后 ，componentDidUpdate 之前调⽤，有两个参数 prevProps 和 prevState，表示之前的属性和之前的 state，这个函数有⼀个返回值，会作为第三个参数传给 componentDidUpdate，如果你不想要返回值，可以返回 null，此⽣命周期必须与 componentDidUpdate 搭配使⽤</li>
<li>componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot) ,该⽅法在 getSnapshotBeforeUpdate ⽅法之后被调⽤，有三个参数 prevProps，prevState，snapshot，表示之前的 props，之前的 state，和 snapshot。第三个参数是 getSnapshotBeforeUpdate 返回的,如果触发某些回调函数时需要⽤到 DOM 元素的状态，则将对⽐或计算的过程迁移⾄ getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统⼀触发回调或更新状态。</li>
</ul>
</li>
<li>卸载阶段</li>
</ul>
<h2 id="setState-是同步还是异步"><a href="#setState-是同步还是异步" class="headerlink" title="setState 是同步还是异步"></a>setState 是同步还是异步</h2><h2 id="react-组件的通信"><a href="#react-组件的通信" class="headerlink" title="react 组件的通信"></a>react 组件的通信</h2><h2 id="react-优化手段"><a href="#react-优化手段" class="headerlink" title="react 优化手段"></a>react 优化手段</h2><h2 id="讲-一-下-react-fiber？"><a href="#讲-一-下-react-fiber？" class="headerlink" title="讲 一 下 react fiber？"></a>讲 一 下 react fiber？</h2><ul>
<li><p>React 通过Fiber 架构，让这个执⾏过程变成可被中断。“适时”地让出 CPU 执⾏权，除了可以让浏<br>览器及时地响应⽤户的交互，还有其他好处:<br>●分批延时对DOM进⾏操作，避免⼀次性操作⼤量 DOM 节点，可以得到更好的⽤户体验；<br>●给浏览器⼀点喘息的机会，它会对代码进⾏编译优化（JIT）及进⾏热代码优化，或者对 reflow 进⾏修<br>正。</p>
</li>
<li><p>Fiber 也称协程或者纤程。它和线程并不⼀样，协程本身是没有并发或者并⾏能⼒的（需要配<br>合线程），它只是⼀种控制流程的让出机制。让出 CPU 的执⾏权，让 CPU 能在这段时间执⾏其他的操<br>作。渲染的过程可以被中断，可以将控制权交回浏览器，让位给⾼优先级的任务，浏览器空闲后再恢复<br>渲染。</p>
</li>
</ul>
<h2 id="redux-和-mobx-的-区-别-和-使-用-场-景"><a href="#redux-和-mobx-的-区-别-和-使-用-场-景" class="headerlink" title="redux 和 mobx 的 区 别 和 使 用 场 景"></a>redux 和 mobx 的 区 别 和 使 用 场 景</h2><h2 id="常-用-的-react-hooks-方-法"><a href="#常-用-的-react-hooks-方-法" class="headerlink" title="常 用 的 react hooks 方 法"></a>常 用 的 react hooks 方 法</h2><h2 id="useState-怎-么-做-缓-存-的"><a href="#useState-怎-么-做-缓-存-的" class="headerlink" title="useState 怎 么 做 缓 存 的"></a>useState 怎 么 做 缓 存 的</h2><h2 id="react-ssr-是-在-什-么-场-景-下-做-的-？"><a href="#react-ssr-是-在-什-么-场-景-下-做-的-？" class="headerlink" title="react ssr 是 在 什 么 场 景 下 做 的 ？"></a>react ssr 是 在 什 么 场 景 下 做 的 ？</h2><h2 id="react-ssr-双-端-怎-么-做-构-建-的-？-区-别-在-哪-里-？"><a href="#react-ssr-双-端-怎-么-做-构-建-的-？-区-别-在-哪-里-？" class="headerlink" title="react ssr 双 端 怎 么 做 构 建 的 ？ 区 别 在 哪 里 ？"></a>react ssr 双 端 怎 么 做 构 建 的 ？ 区 别 在 哪 里 ？</h2><h2 id="render-和-renderToString-的-底-层-实-现-上-的-区-别-？"><a href="#render-和-renderToString-的-底-层-实-现-上-的-区-别-？" class="headerlink" title="render 和 renderToString 的 底 层 实 现 上 的 区 别 ？"></a>render 和 renderToString 的 底 层 实 现 上 的 区 别 ？</h2><h2 id="react-ssr-和-ejs-性-能-的-差-异-？"><a href="#react-ssr-和-ejs-性-能-的-差-异-？" class="headerlink" title="react ssr 和 ejs 性 能 的 差 异 ？"></a>react ssr 和 ejs 性 能 的 差 异 ？</h2><h2 id="useRef-与-createRef-区别"><a href="#useRef-与-createRef-区别" class="headerlink" title="useRef 与 createRef 区别"></a>useRef 与 createRef 区别</h2><p>createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。</p>
<h2 id="React-Fiber-是什么"><a href="#React-Fiber-是什么" class="headerlink" title="React Fiber 是什么?"></a>React Fiber 是什么?</h2><h3 id="Fiber-出现的背景"><a href="#Fiber-出现的背景" class="headerlink" title="Fiber 出现的背景"></a>Fiber 出现的背景</h3><p>首先要知道的是，JS 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待。在这样的机制下，如果 JS 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿<br>而这正是 React15 的 Stack Reconciler 所面临的问题，即是 JS 对主线程的超时占用问题。Stack Reconciler 是一个同步的递归过程，使用的是 JS 引擎自身的函数调用栈，它会一直执行到栈空为止，所以当 React 在渲染组件时，从开始到渲染完成整个过程是一气呵成的。如果渲染的组件比较庞大，JS 执行会占据主线程较长时间，会导致页面响应度变差。而且所有的任务都是按照先后顺序，没有区分优先级，这样就会导致优先级比较高的任务无法被优先执行</p>
<h3 id="Fiber-是什么"><a href="#Fiber-是什么" class="headerlink" title="Fiber 是什么"></a>Fiber 是什么</h3><p>Fiber 与进程、线程同为程序执行过程，Fiber 就是比线程还要纤细的一个过程，意味着在对渲染过程进行更加精细的控制<br>从架构角度老看，Fiber 是对 React 核心算法(即调和过程)的重写<br>从编码角度来看，Fiber 是 React 内部所定义的一种数据结构，它是 Fiber 树结构的节点单位，也就是 React 16 新架构下的虚拟 DOM</p>
<h3 id="Fiber-是如何解决问题的？"><a href="#Fiber-是如何解决问题的？" class="headerlink" title="Fiber 是如何解决问题的？"></a>Fiber 是如何解决问题的？</h3><p>Fiber 把一个渲染任务分解为多个渲染任务，而不是一次性完成，把每一个分割得很细得任务视作一个执行单元，React 就会检查现在还剩多少时间，如果没有时间就将控制权让出去，故任务会被分散到多个帧里面，中间可以返回至主程控制执行其他任务，最终实现更流畅的用户体验。<br>即实现了增量渲染，实现可中断与恢复，恢复后也可以复用之前的中间状态，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber 节点</p>
<h3 id="Fiber-实现原理"><a href="#Fiber-实现原理" class="headerlink" title="Fiber 实现原理"></a>Fiber 实现原理</h3><p>实现的方式是 requestIdleCallback 这一 api，但 React 团队 polyfill 了这个 api，使其对比原生的浏览器兼容性更好且扩展了这个特性。requestIdleCallback 回调的执行前提条件是当前浏览器处于空闲状态。即 requestIdleCallback 的作用是在浏览器一帧的剩余空闲时间内执行优先度相对较低的任务。</p>
<p>首先 React 中任务切割为多个步骤，分批完成。在完成一部分任务之后，将控制权交回浏览器，让浏览器有时间在进行页面的渲染。等浏览器忙完之后有剩余时间，在继续之前 React 未完成的任务，是一种合作式调度。简而言之，由浏览器给我们分配执行时间片，我们要按照约定在这个时间内执行完毕，并将控制权交还给浏览器。React16 的 Reconciler 基于 Fiber 节点实现，被称为 Fiber Reconciler</p>
<p>作为静态的数据结构来说，每个 Fiber 节点对应一个 React element，保存该组件的类型(函数组件、类组件、原生组件等等)，对应的 DOM 节点等信息</p>
<p>作为动态的工作单元来说，每个 Fiber 节点保存本次更新中该组件改变的状态、要执行的工作。每个 Fiber 节点有个对应的 React element，多个 Fiber 节点是如何形成树的呢？靠下面的三个属性：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;指向父级Fiber节点</span><br><span class="line">this.return &#x3D; null;</span><br><span class="line">&#x2F;&#x2F; 指向子Fiber节点</span><br><span class="line">this.child &#x3D; null;</span><br><span class="line">&#x2F;&#x2F; 指向右边第一个兄弟Fiber节点</span><br><span class="line">this.sibling &#x3D; null;</span><br></pre></td></tr></table></figure>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7/" class="post-title-link" itemprop="url">浏览器调试技巧</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-29 09:22:25" itemprop="dateCreated datePublished" datetime="2020-10-29T09:22:25+08:00">2020-10-29</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-09-19 09:22:42" itemprop="dateModified" datetime="2022-09-19T09:22:42+08:00">2022-09-19</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7/" itemprop="url" rel="index"><span itemprop="name">浏览器调试技巧</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="debug-函数"><a href="#debug-函数" class="headerlink" title="debug 函数"></a>debug 函数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  alert(<span class="number">123</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">debug(test);</span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E8%B0%83%E8%AF%95%E6%8A%80%E5%B7%A7/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/27/%E6%96%87%E6%A1%A3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/27/%E6%96%87%E6%A1%A3/" class="post-title-link" itemprop="url">在线资源文档</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-27 10:00:55" itemprop="dateCreated datePublished" datetime="2020-10-27T10:00:55+08:00">2020-10-27</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-04-27 09:11:48" itemprop="dateModified" datetime="2023-04-27T09:11:48+08:00">2023-04-27</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E5%9C%A8%E7%BA%BF%E8%B5%84%E6%BA%90%E6%96%87%E6%A1%A3/" itemprop="url" rel="index"><span itemprop="name">在线资源文档</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <p><a target="_blank" rel="noopener" href="https://www.bookstack.cn/">书栈网</a> <a target="_blank" rel="noopener" href="https://docschina.org/">印记中文</a> <a target="_blank" rel="noopener" href="https://www.javascriptc.com/">JS 中文网</a> <a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">MDN</a> <a target="_blank" rel="noopener" href="https://vue3js.cn/">vue3</a> <a target="_blank" rel="noopener" href="https://cn.vuejs.org/">vue</a> <a target="_blank" rel="noopener" href="https://react.docschina.org/">react</a> <a target="_blank" rel="noopener" href="https://angular.cn/">angular</a> <a target="_blank" rel="noopener" href="https://www.yuque.com/dashboard/">语雀</a> <a target="_blank" rel="noopener" href="https://www.kancloud.cn/jsfront/month/1897005">看云 js 月报</a></p>
<p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247487217&idx=2&sn=85f731a43b93b57230a7919945a7ae0d&chksm=fa2bee18cd5c670e9d0f2546fff7e579c416aa85fb4bf49223277ffb61624f99f6b50805902b&scene=126&sessionid=1606197281&key=b446d8ff764b323102bbb0c113388de17012eba1572ae079f7de09d4953d2d1bf50d1d2090b81c2dfc588fcff11bf70221158523c35e204a1efb7892811bf190ab4421d811a457fdc3900bfed451eb8448891ba49a6aa823bab680777e2c6eafae438fa434c108f7bf67b1397b3f1dca3dd4c3a5b661ebfefd647f8ebb7179cf&ascene=1&uin=MjQ4OTg5MDk4MQ==&devicetype=Windows+10+x64&version=6300002f&lang=zh_CN&exportkey=AbqEAQXqtW+qx3SZA80qofI=&pass_ticket=EgQTrjNMllPeNIVkI9qHCXD/LxBZ2Z/8w6sriw+i2SdOdjARLD0NCMZcPJQLNT7e&wx_header=0">编码规范</a></p>
<p><a target="_blank" rel="noopener" href="https://kaiwu.lagou.com/xunlianying/index.html?courseId=25#/course">拉钩教育</a><br><a target="_blank" rel="noopener" href="https://time.geekbang.org/">极客时间</a><br><a target="_blank" rel="noopener" href="https://appf96umjwe7950.h5.xiaoeknow.com/v1/auth?appId=appF96umJwe7950&redirect_url=https://appF96umJwe7950.h5.xiaoeknow.com/homepage/30">珠峰培训</a><br><a target="_blank" rel="noopener" href="https://www.kaikeba.com/">开课吧</a></p>
<h2 id="在线工具"><a href="#在线工具" class="headerlink" title="在线工具"></a>在线工具</h2><ul>
<li><a target="_blank" rel="noopener" href="https://codepen.io/">CodePen | 前端在线测试和演示工具 国外站点</a></li>
<li><a target="_blank" rel="noopener" href="https://caniuse.com/">Can I use | Web 前端兼容性列表</a></li>
<li><a target="_blank" rel="noopener" href="https://tinypng.com/">TinyPNG | PNG/JPG 图片在线压缩工具</a></li>
<li><a target="_blank" rel="noopener" href="https://www.umeng.com/">CNZZ | 老牌站点统计工具 5 年前国内站长必上网站</a></li>
<li><a target="_blank" rel="noopener" href="https://web.dev/measure/">web.dev | 评测网站性能 基于 Lighthouse</a></li>
<li><a target="_blank" rel="noopener" href="https://www.shapedivider.app/">Shape Divider | 定制各种形状 SVG 的工具</a></li>
<li><a target="_blank" rel="noopener" href="https://gtmetrix.com/">GTmetrix | 网页性能在线分析工具</a></li>
<li><a target="_blank" rel="noopener" href="https://carbon.now.sh/">Carbon | 代码转图片工具</a></li>
<li><a target="_blank" rel="noopener" href="https://www.wappalyzer.com/">Wappalyzer | 检测某个网站的技术栈</a></li>
<li><a target="_blank" rel="noopener" href="https://unbug.github.io/codelf">CODEIF | 变量方法起名工具 人工智能加持</a></li>
<li><a target="_blank" rel="noopener" href="https://tool.lu/">tool.lu | 程序员在线工具大全</a></li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/u-k91GI2POwXeKSeTz8ddQ">CSS生成代码工具</a></li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/XutryG2ylqRP3XL4Fbz4pQ">2022年精选文章合集</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/7188890491188936762#heading-2">2022年精选文章合集</a></li>
</ul>
<h2 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h2><ul>
<li><a target="_blank" rel="noopener" href="http://justjavac.com/named-function-expressions-demystified.html">命名函数表达式探秘</a> - kangax、为之漫笔(翻译) (原始地址无法打开，所以此处地址为 justjavac 博客上的备份)</li>
<li><a target="_blank" rel="noopener" href="https://github.com/getify/You-Dont-Know-JS/tree/1ed-zh-CN">你不知道的 Javascript</a></li>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html">深入理解 JavaScript 系列</a></li>
<li><a target="_blank" rel="noopener" href="http://www.oschina.net/translate/learning-javascript-design-patterns">学用 JavaScript 设计模式</a> - 开源中国</li>
<li><a target="_blank" rel="noopener" href="https://github.com/adamlu/javascript-style-guide">Airbnb JavaScript 规范</a></li>
<li><a target="_blank" rel="noopener" href="http://es6.ruanyifeng.com/">ECMAScript 6 入门</a> - 阮一峰</li>
<li><a target="_blank" rel="noopener" href="http://bq69.com/blog/articles/script/868/google-javascript-style-guide.html">Google JavaScript 代码风格指南</a></li>
<li><a target="_blank" rel="noopener" href="http://javascript.ruanyifeng.com/">JavaScript 标准参考教程（alpha）</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/justjavac/12-javascript-quirks">javascript 的 12 个怪癖</a></li>
<li><a target="_blank" rel="noopener" href="http://bonsaiden.github.io/JavaScript-Garden/zh/">JavaScript 秘密花园</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/jayli/javascript-patterns">《JavaScript 模式》</a> (《JavaScript patterns》译本)</li>
<li><a target="_blank" rel="noopener" href="https://web.archive.org/web/20170112164945/http://typeof.net/s/jsmech/">Javascript 原理</a></li>
<li><a target="_blank" rel="noopener" href="http://liubin.github.io/promises-book/">JavaScript Promise 迷你书</a></li>
<li><a target="_blank" rel="noopener" href="http://pij.robinqu.me/">Javascript 编程指南</a> (<a target="_blank" rel="noopener" href="https://github.com/RobinQu/Programing-In-Javascript">源码</a>)</li>
<li><a target="_blank" rel="noopener" href="http://icodeit.org/jsccp/">JavaScript 核心概念及实践</a> (PDF)</li>
</ul>
<h2 id="css"><a href="#css" class="headerlink" title="css"></a>css</h2><ul>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA==&mid=2247507272&idx=1&sn=709943948b39689ce32d2f241e907783&chksm=fc7e9313cb091a05d7ebfa083062cd39c9b96b6be8f58b012a84fdbda79fa6227c66e67e0aaa&token=400768939&lang=zh_CN&scene=21#wechat_redirect">10分钟彻底掌握 CSS Flex 布局</a></li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA==&mid=2247507988&idx=1&sn=a6f918aee92341383bb4a71bedee16b0&chksm=fc7eee4fcb096759db8e3d1878948d5c9fa630b500a6541d729f9a8cf8b4ad2663e8cc93fe92&token=400768939&lang=zh_CN&scene=21#wechat_redirect">一文读懂 CSS 单位</a></li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA==&mid=2247510354&idx=1&sn=6de83188c27399e042372cf16d454386&chksm=fc7ee709cb096e1fcabeb956b1a07b62f8642b4addb72ba40ee2f72c41516fbb3a1dc41c3606&token=400768939&lang=zh_CN&scene=21#wechat_redirect">玩转CSS变量</a></li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA==&mid=2247499112&idx=1&sn=e40e4f02a2605583bfebfacdc189d4fb&chksm=fc7eb333cb093a254d5d6104cad8fda9e835858115b856ec33fcbceeaf28bc83d4fb2b741ab5&token=400768939&lang=zh_CN&scene=21#wechat_redirect">CSS实用技巧</a></li>
<li><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s?__biz=MzU2MTIyNDUwMA==&mid=2247494835&idx=1&sn=9ec716c65783ecf50abac2f87eac21ff&chksm=fc7ea2e8cb092bfebac42305449a5a7708659e1ac0dbac247e186d228ab5632f8933fbb4767f&token=400768939&lang=zh_CN&scene=21#wechat_redirect">高级 CSS 选择器</a></li>
</ul>
<h2 id="Node-js"><a href="#Node-js" class="headerlink" title="Node.js"></a>Node.js</h2><ul>
<li><a target="_blank" rel="noopener" href="http://nqdeng.github.io/7-days-nodejs/">七天学会 NodeJS</a> - 阿里团队</li>
<li><a target="_blank" rel="noopener" href="https://github.com/nswbmw/N-blog">使用 Express + MongoDB 搭建多人博客</a></li>
<li><a target="_blank" rel="noopener" href="http://expressjs.jser.us/">express.js 中文文档</a></li>
<li><a target="_blank" rel="noopener" href="http://javascript.ruanyifeng.com/nodejs/express.html">Express 框架</a></li>
<li><a target="_blank" rel="noopener" href="http://nodejs.ctolib.com/docs/sfile/jstraining/engineering.html">JavaScript 全栈工程师培训材料</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/guo-yu/koa-guide">koa 中文文档</a></li>
<li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/learnyounode-zh-cn">Learn You The Node.js For Much Win! (中文版)</a></li>
<li><a target="_blank" rel="noopener" href="http://i5ting.github.io/node-debug-tutorial/">Node debug 三法三例</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/alsotang/node-lessons">Node.js 包教不包会</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/jollen/nodejs-fullstack-lessons">Node.js Fullstack《從零到一的進撃》</a></li>
<li><a target="_blank" rel="noopener" href="http://www.nodebeginner.org/index-zh-cn.html">Node 入门</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/nodejs-tw/nodejs-wiki-book">Nodejs Wiki Book</a> (繁体中文)</li>
<li><a target="_blank" rel="noopener" href="https://www.gitbook.com/book/0532/nodejs/details">nodejs 中文文档</a></li>
<li><a target="_blank" rel="noopener" href="https://www.gitbook.com/book/0532/nodejs/details">The NodeJS 中文文档</a> - 社区翻译</li>
<li><a target="_blank" rel="noopener" href="https://blog.poetries.top/node-learning-notes/notes/base/01-%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html">Node.js 学习指南</a></li>
<li><a target="_blank" rel="noopener" href="https://theanarkh.github.io/understand-nodejs/">Node.js 源码剖析</a></li>
</ul>
<h2 id="React-js"><a href="#React-js" class="headerlink" title="React.js"></a>React.js</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/theJian/build-a-hn-front-page">Learn React &amp; Webpack by building the Hacker News front page</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/hateonion/react-bits-CN">React-Bits 中文文档</a></li>
<li><a target="_blank" rel="noopener" href="http://wiki.jikexueyuan.com/project/react-native/">React Native 中文文档(含最新 Android 内容)</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/fakefish/react-webpack-cookbook">React webpack-cookbook</a></li>
<li><a target="_blank" rel="noopener" href="http://fraserxu.me/intro-to-react/">React.js 入门教程</a></li>
<li><a target="_blank" rel="noopener" href="https://discountry.github.io/react/">React.js 中文文档</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/sxfad/react-admin/">基于 Ant Design React 的管理系统架构</a></li>
<li><a target="_blank" rel="noopener" href="https://react.jokcy.me/">React 源码解析</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/KieSun/awesome-frontend-source-interpretation">从源码层面，剖析前端主流技术的底层实现原理</a></li>
<li><a target="_blank" rel="noopener" href="https://juejin.cn/post/6844904157829136398">React Hooks 使用详解及实际项目中遇到的坑</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/beichensky/Blog/issues/6">React Hooks 常见问题及解决方案</a></li>
<li><a target="_blank" rel="noopener" href="https://react.iamkasong.com/">react 技术揭秘</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/puxiao/react-hook-tutorial/blob/master/03%20useState%E9%AB%98%E7%BA%A7%E7%94%A8%E6%B3%95.md">React Hook 系列教程，学习和探索 Hooks 世界</a></li>
</ul>
<h2 id="Vue-js"><a href="#Vue-js" class="headerlink" title="Vue.js"></a>Vue.js</h2><ul>
<li><a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/">Vue.js 中文文档</a></li>
<li><a target="_blank" rel="noopener" href="https://vue3.chengpeiquan.com/">Vue3.0 学习教程与实战案例</a> - chengpeiquan</li>
<li><a target="_blank" rel="noopener" href="https://vue-js.com/learn-vue/start/">Vue 源码系列</a></li>
<li><a target="_blank" rel="noopener" href="https://vue3js.cn/">vue3 文档</a></li>
</ul>
<h2 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h2><ul>
<li><p><a target="_blank" rel="noopener" href="https://jkchao.github.io/typescript-book-chinese/project/compilationContext.html#tsconfig-json">深入理解 Typescript</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://typescript.bootcss.com/">typescript</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.runoob.com/typescript/ts-tutorial.html">TypeScript 教程</a> - runoob (HTML)</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.runoob.com/w3cnote/getting-started-with-typescript.html">TypeScript 入门教程</a> - runoob (HTML)</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.tslang.cn/">TypeScript 中文网</a> (HTML)</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://github.com/jkchao/typescript-book-chinese">TypeScript Deep Dive 中文版</a> - 三毛 (HTML)</p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://www.runoob.com/manual/gitbook/TypeScript/_book/">TypeScript Handbook（中文版）</a> - Patrick Zhong (HTML)</p>
</li>
</ul>
<h2 id="版本控制"><a href="#版本控制" class="headerlink" title="版本控制"></a>版本控制</h2><ul>
<li><a target="_blank" rel="noopener" href="https://web.archive.org/web/20191004044726/http://igit.linuxtoy.org:80/index.html">沉浸式学 Git</a></li>
<li><a target="_blank" rel="noopener" href="http://backlogtool.com/git-guide/cn/">猴子都能懂的 GIT 入门</a></li>
<li><a target="_blank" rel="noopener" href="https://learngitbranching.js.org/">学习 Git 分支</a></li>
<li><a target="_blank" rel="noopener" href="http://rogerdudler.github.io/git-guide/index.zh.html">Git - 简易指南</a></li>
<li><a target="_blank" rel="noopener" href="http://gitref.justjavac.com/">Git 参考手册</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/flyhigher139/Git-Cheat-Sheet">Git-Cheat-Sheet</a> - flyhigher139</li>
<li><a target="_blank" rel="noopener" href="http://gitbook.liuhui998.com/">Git Community Book 中文版</a></li>
<li><a target="_blank" rel="noopener" href="http://danielkummer.github.io/git-flow-cheatsheet/index.zh_CN.html">git-flow 备忘清单</a></li>
<li><a target="_blank" rel="noopener" href="http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn/">Git magic</a></li>
<li><a target="_blank" rel="noopener" href="http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn/">Git Magic</a></li>
<li><a target="_blank" rel="noopener" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git 教程</a> - 廖雪峰</li>
<li><a target="_blank" rel="noopener" href="https://github.com/waylau/github-help">Github 帮助文档</a></li>
<li><a target="_blank" rel="noopener" href="https://snowdream86.gitbooks.io/github-cheat-sheet/content/zh/">GitHub 秘籍</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/gotgit/gotgithub">Got GitHub</a></li>
<li><a target="_blank" rel="noopener" href="http://www.worldhello.net/gotgithub/index.html">GotGitHub</a></li>
<li><a target="_blank" rel="noopener" href="https://zh-hginit.readthedocs.io/en/latest/">HgInit (中文版)</a></li>
<li><a target="_blank" rel="noopener" href="https://www.mercurial-scm.org/wiki/ChineseTutorial">Mercurial 使用教程</a></li>
<li><a target="_blank" rel="noopener" href="https://git-scm.com/book/zh/v2">Pro Git</a></li>
<li><a target="_blank" rel="noopener" href="https://bingohuang.gitbooks.io/progit2/content">Pro Git 第二版 中文版</a> - Bingo Huang</li>
<li><a target="_blank" rel="noopener" href="http://svnbook.red-bean.com/nightly/zh/index.html">svn 手册</a></li>
</ul>
<h2 id="Deno"><a href="#Deno" class="headerlink" title="Deno"></a>Deno</h2><ul>
<li><a target="_blank" rel="noopener" href="https://deno-tutorial.js.org/">Deno 钻研之术</a></li>
<li><a target="_blank" rel="noopener" href="https://chenshenhai.com/deno_note">Deno 进阶开发笔记</a> - 大深海</li>
</ul>
<h2 id="Markdown"><a href="#Markdown" class="headerlink" title="Markdown"></a>Markdown</h2><ul>
<li><a target="_blank" rel="noopener" href="http://www.jianshu.com/p/q81RER">献给写作者的 Markdown 新手指南</a></li>
<li><a target="_blank" rel="noopener" href="https://markdown.tw/">Markdown 語法說明</a></li>
</ul>
<h2 id="MySQL"><a href="#MySQL" class="headerlink" title="MySQL"></a>MySQL</h2><ul>
<li><a target="_blank" rel="noopener" href="http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html">21 分钟 MySQL 入门教程</a></li>
<li><a target="_blank" rel="noopener" href="http://blog.codinglabs.org/articles/theory-of-mysql-index.html">MySQL 索引背后的数据结构及算法原理</a></li>
</ul>
<h2 id="NoSQL"><a href="#NoSQL" class="headerlink" title="NoSQL"></a>NoSQL</h2><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/huangz1990/annotated_redis_source">带有详细注释的 Redis 2.6 代码</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/huangz1990/redis-3.0-annotated">带有详细注释的 Redis 3.0 代码</a></li>
<li><a target="_blank" rel="noopener" href="http://disque.huangz.me/">Disque 使用教程</a></li>
<li><a target="_blank" rel="noopener" href="http://redisdoc.com/">Redis 命令参考</a></li>
<li><a target="_blank" rel="noopener" href="http://redisbook.com/">Redis 设计与实现</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/justinyhuang/the-little-mongodb-book-cn/blob/master/mongodb.md">The Little MongoDB Book</a></li>
<li><a target="_blank" rel="noopener" href="https://github.com/JasonLai256/the-little-redis-book/blob/master/cn/redis.md">The Little Redis Book</a></li>
</ul>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/26/react%E7%AC%94%E8%AE%B0/MiddleWare%E5%BA%94%E7%94%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/26/react%E7%AC%94%E8%AE%B0/MiddleWare%E5%BA%94%E7%94%A8/" class="post-title-link" itemprop="url">react  redux中间件</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-26 10:07:09" itemprop="dateCreated datePublished" datetime="2020-10-26T10:07:09+08:00">2020-10-26</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-07-15 16:18:07" itemprop="dateModified" datetime="2022-07-15T16:18:07+08:00">2022-07-15</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="MiddleWare的使用"><a href="#MiddleWare的使用" class="headerlink" title="MiddleWare的使用"></a>MiddleWare的使用</h2><h3 id="1-logger中间件"><a href="#1-logger中间件" class="headerlink" title="1.logger中间件"></a>1.logger中间件</h3><p>我们改写了，dispatch方法实现了在更改状态时打印前后的状态,但是这种方案并不好。所以我们可以采用中间的方式。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> store = createStore(reducer);</span><br><span class="line"><span class="keyword">let</span> dispatch = store.dispatch;</span><br><span class="line">store.dispatch = <span class="function"><span class="keyword">function</span> (<span class="params">action</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(store.getState().number);</span><br><span class="line">  dispatch(action);</span><br><span class="line">  <span class="built_in">console</span>.log(store.getState().number)</span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store;</span><br></pre></td></tr></table></figure>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/10/26/react%E7%AC%94%E8%AE%B0/MiddleWare%E5%BA%94%E7%94%A8/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/25/react%E7%AC%94%E8%AE%B0/react-hooks/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/25/react%E7%AC%94%E8%AE%B0/react-hooks/" class="post-title-link" itemprop="url">react-hooks</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-25 10:08:09" itemprop="dateCreated datePublished" datetime="2020-10-25T10:08:09+08:00">2020-10-25</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-03-22 19:56:23" itemprop="dateModified" datetime="2023-03-22T19:56:23+08:00">2023-03-22</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="认识-hooks"><a href="#认识-hooks" class="headerlink" title="认识 hooks"></a>认识 hooks</h2><ul>
<li><p>Hook 是⼀一个特殊的函数，它可以让你“钩⼊入” React 的特性。例例如， useState 是允许你在 React 函数组件中添加 state 的 Hook</p>
</li>
<li><p>如果你在编写函数组件并意识到需要向其添加⼀一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使⽤用 Hook</p>
</li>
<li><p>函数组件强制刷新   const [,setCount] = useState({});  不传递一个值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">HookPage</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 声明⼀一个叫 “count” 的 state 变量量，初始化为0</span></span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line">  <span class="comment">// 惰性初始 state值</span></span><br><span class="line">  <span class="keyword">const</span> [count1, setCount1] = useState(<span class="function">() =&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">11111</span>); <span class="comment">// 只执行一次</span></span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h3&gt;HookPage&lt;/h3&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">() =&gt;</span> setCount(count + <span class="number">1</span>)&#125;&gt;add&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="使⽤-Effect-Hook"><a href="#使⽤-Effect-Hook" class="headerlink" title="使⽤ Effect Hook"></a>使⽤ Effect Hook</h2><ul>
<li>Effect Hook 可以让你在函数组件中执⾏行行副作⽤用操作。<br>数据获取，设置订阅以及⼿手动更更改 React 组件中的 DOM 都属于副作⽤用。不不管你知不不知道这些操作，或<br>是“副作⽤用”这个名字，应该都在组件中使⽤用过它们。</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">HookPage</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 声明⼀一个叫 “count” 的 state 变量量，初始化为0</span></span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line">  <span class="comment">// 与 componentDidMount 和 componentDidUpdate相似</span></span><br><span class="line">  useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 更更新 title</span></span><br><span class="line">    <span class="built_in">document</span>.title = <span class="string">`You clicked <span class="subst">$&#123;count&#125;</span> times`</span>;</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h3&gt;HookPage&lt;/h3&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">() =&gt;</span> setCount(count + <span class="number">1</span>)&#125;&gt;add&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在函数组件主体内（这⾥里里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器器、记录⽇日志以及执<br>⾏行行其他包含副作⽤用的操作都是不不被允许的，因为这可能会产⽣生莫名其妙的 bug 并破坏 UI 的⼀一致性。<br>使⽤用 useEffect 完成副作⽤用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执⾏行行。你可以<br>把 effect 看作从 React 的纯函数式世界通往命令式世界的逃⽣生通道。</p>
<h2 id="effect-的条件执⾏"><a href="#effect-的条件执⾏" class="headerlink" title="effect 的条件执⾏"></a>effect 的条件执⾏</h2><p>默认情况下，effect 会在每轮组件渲染完成后执行。这样的话，一旦 effect 的依赖发⽣生变化，它就会被<br>重新创建。<br>然⽽而，在某些场景下这么做可能会矫枉过正。⽐如，在上⼀一章节的订阅示例例中，我们不需要在每次组件<br>更新时都创建新的订阅，⽽而是仅需要在 source props 改变时重新创建。<br>要实现这⼀点，可以给 useEffect 传递第⼆个参数，它是 effect 所依赖的值数组。更更新后的示例例如<br>下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState, useEffect &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">HookPage</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 声明⼀一个叫 “count” 的 state 变量量，初始化为0</span></span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line">  <span class="keyword">const</span> [date, setDate] = useState(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">  <span class="comment">// 与 componentDidMount 和 componentDidUpdate相似</span></span><br><span class="line">  useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 更更新 title</span></span><br><span class="line">    <span class="built_in">document</span>.title = <span class="string">`You clicked <span class="subst">$&#123;count&#125;</span> times`</span>;</span><br><span class="line">  &#125;, [count]);</span><br><span class="line">  useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> timer = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      setDate(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h3&gt;HookPage&lt;/h3&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">() =&gt;</span> setCount(count + <span class="number">1</span>)&#125;&gt;add&lt;/button&gt;</span><br><span class="line">      &lt;p&gt;&#123;date.toLocaleTimeString()&#125;&lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>此时，只有当 useEffect 第⼆个参数组⾥的数值改变后才会重新创建订阅<br>但依赖项为[],在初次渲染和卸载的时候执行</p>
<h2 id="effect-清除函数"><a href="#effect-清除函数" class="headerlink" title="effect 清除函数"></a>effect 清除函数</h2><p>组件卸载时需要清除 effect 创建的诸如订阅或计时器器 ID 等资源。要实现这⼀一点， useEffect<br>函数需返回⼀个清除函数，以防⽌止内存泄漏漏，清除函数会在组件卸载前执⾏行行。</p>
<p>useEffect 依赖[]，组件销毁是执行 fn，等于 WilUnMount<br>useEffect 无依赖或依赖[a,b]，组件更新时执行fn<br>即，下一次执行 useEffect 之前，就会执行 fn，无论更新或卸载<br>执行实际</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> timer = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    setDate(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">  <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">&#125;, []);</span><br></pre></td></tr></table></figure>

<h2 id="react-hooks-竞态"><a href="#react-hooks-竞态" class="headerlink" title="react hooks 竞态"></a>react hooks 竞态</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> didSearch = <span class="literal">false</span>;</span><br><span class="line">    <span class="keyword">if</span> (text) &#123;</span><br><span class="line">        dispatch</span><br><span class="line">            (&#123;</span><br><span class="line">                type: <span class="string">&#x27;search/fundSearchApp&#x27;</span>,</span><br><span class="line">                payload: &#123; <span class="attr">input</span>: text, <span class="attr">pageSize</span>: <span class="number">20</span>, <span class="attr">isQueryPerformance</span>: <span class="literal">true</span> &#125;</span><br><span class="line">            &#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">if</span> (!didSearch) &#123;</span><br><span class="line">                    setSearchList(res.searchList)</span><br><span class="line">                    setCurrent(res.current)</span><br><span class="line">                    setTotal(res.total)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;);</span><br><span class="line"></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        setSearchList([]);</span><br><span class="line">        setCurrent(<span class="number">1</span>);</span><br><span class="line">        setTotal(<span class="number">0</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        didSearch = <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;, [text])</span><br></pre></td></tr></table></figure>

<p>定义一个字段didSearch利用JS的闭包，每次都是不同的变量，在下一次text变化完成，useEffect会再次执行（渲染页面再去调用return方法再去执行useEffect），如果接口没有返回重新渲染了标识会改变使更新逻辑不再执行。</p>
<h2 id="自定义-hooks"><a href="#自定义-hooks" class="headerlink" title="自定义 hooks"></a>自定义 hooks</h2><p>自定义 Hook 是⼀一个函数，其名称以 “use” 开头，函数内部可以调⽤用其他的 Hook。<br><code>&lt;p&gt;&#123;useClock().toLocaleTimeString()&#125;&lt;/p&gt;</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//⾃自定义hook，命名必须以use开头</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">useClock</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [date, setDate] = useState(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">  useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;date effect&quot;</span>);</span><br><span class="line">    <span class="comment">//只需要在didMount时候执⾏行行就可以了了</span></span><br><span class="line">    <span class="keyword">const</span> timer = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      setDate(<span class="keyword">new</span> <span class="built_in">Date</span>());</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">    <span class="comment">//清除定时器器，类似willUnmount</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">  &#125;, []);</span><br><span class="line">  <span class="keyword">return</span> date;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="hooks-使用规则"><a href="#hooks-使用规则" class="headerlink" title="hooks 使用规则"></a>hooks 使用规则</h2><ul>
<li>只能在函数最外层调⽤用 Hook。不要在循环、条件判断或者⼦子函数中调⽤用。</li>
<li>hooks 严重依赖于调用的顺序</li>
<li>只能在 React 的函数组件中调⽤用 Hook。不要在其他 JavaScript 函数中调⽤用。（还有⼀个地⽅方可<br>以调⽤用 Hook —— 就是⾃自定义的 Hook 中。）</li>
</ul>
<h2 id="React-Hooks-注意事项"><a href="#React-Hooks-注意事项" class="headerlink" title="React Hooks 注意事项"></a>React Hooks 注意事项</h2><ul>
<li><p>useState 初始化值，只有第一次有效</p>
</li>
<li><p>useEffect 内部不能修改 state 当依赖为[]时<br>解决方法<br>1 第二参数不传入依赖或者传入修改的那个state；<br>2 可以借助 useRef<br>3 可以借助临时变量，在useEffect 外面定义一个变量做转换</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>)</span><br><span class="line">  <span class="keyword">const</span> countRef = useRef(<span class="number">0</span>)</span><br><span class="line"> useEffect(<span class="function">() =&gt;</span> &#123; </span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;useEffect...&#x27;</span>, count)</span><br><span class="line"></span><br><span class="line">      <span class="comment">// 定时任务</span></span><br><span class="line">      <span class="keyword">const</span> timer = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="string">&#x27;setInterval...&#x27;</span>, countRef.current)</span><br><span class="line">          <span class="comment">//  禁止setCount(count + 1)</span></span><br><span class="line">          setCount(++countRef.current)</span><br><span class="line">      &#125;, <span class="number">1000</span>)</span><br><span class="line">      <span class="keyword">return</span> <span class="function">() =&gt;</span> <span class="built_in">clearTimeout</span>(timer)</span><br><span class="line">  &#125;, []) <span class="comment">// 依赖为 []</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>useEffect 可能出现死循环<br>依赖中尽量不要出现引用类型的值</p>
</li>
</ul>
<h2 id="useMemo"><a href="#useMemo" class="headerlink" title="useMemo"></a>useMemo</h2><p>把“创建”函数和依赖项数组作为参数传⼊入 useMemo ，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计算</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState, useMemo &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">UseMemoPage</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line">  <span class="keyword">const</span> expensive = useMemo(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;compute&quot;</span>);</span><br><span class="line">    <span class="keyword">let</span> sum = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; count; i++) &#123;</span><br><span class="line">      sum += i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> sum;</span><br><span class="line">    <span class="comment">//只有count变化，这⾥里里才重新执⾏行行</span></span><br><span class="line">  &#125;, [count]);</span><br><span class="line">  <span class="keyword">const</span> [value, setValue] = useState(<span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h3&gt;UseMemoPage&lt;/h3&gt;</span><br><span class="line">      &lt;p&gt;expensive:&#123;expensive&#125;&lt;/p&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">() =&gt;</span> setCount(count + <span class="number">1</span>)&#125;&gt;add&lt;/button&gt;</span><br><span class="line">      &lt;input value=&#123;value&#125; onChange=&#123;<span class="function">(<span class="params">event</span>) =&gt;</span> setValue(event.target.value)&#125; /&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="useCallback"><a href="#useCallback" class="headerlink" title="useCallback"></a>useCallback</h2><p>把内联回调函数及依赖项数组作为参数传⼊入 useCallback ，它将返回该回调函数的 memoized 版本，<br>该回调函数仅在某个依赖项改变时才会更更新。当你把回调函数传递给经过优化的并使⽤用引⽤用相等性去避<br>免⾮非必要渲染（例例如 shouldComponentUpdate ）的⼦子组件时，它将⾮非常有⽤用。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; useState, useCallback, PureComponent &#125; <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">UseCallbackPage</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count, setCount] = useState(<span class="number">0</span>);</span><br><span class="line">  <span class="keyword">const</span> addClick = useCallback(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> sum = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; count; i++) &#123;</span><br><span class="line">      sum += i;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> sum;</span><br><span class="line">  &#125;, [count]);</span><br><span class="line">  <span class="keyword">const</span> [value, setValue] = useState(<span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h3&gt;UseCallbackPage&lt;/h3&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">() =&gt;</span> setCount(count + <span class="number">1</span>)&#125;&gt;add&lt;/button&gt;</span><br><span class="line">      &lt;input value=&#123;value&#125; onChange=&#123;<span class="function">(<span class="params">event</span>) =&gt;</span> setValue(event.target.value)&#125; /&gt;</span><br><span class="line">      &lt;Child addClick=&#123;addClick&#125; /&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Child</span> <span class="keyword">extends</span> <span class="title">PureComponent</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;child render&quot;</span>);</span><br><span class="line">    <span class="keyword">const</span> &#123; addClick &#125; = <span class="built_in">this</span>.props;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;h3&gt;Child&lt;/h3&gt;</span><br><span class="line">        &lt;button onClick=&#123;<span class="function">() =&gt;</span> <span class="built_in">console</span>.log(addClick())&#125;&gt;add&lt;/button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>useCallback(fn, deps) 相当于 useMemo(() =&gt; fn, deps) 。</code><br>依赖项数组不不会作为参数传给“创建”函数。虽然从概念上来说它表现为：所有“创建”函数中引⽤用的<br>值都应该出现在依赖项数组中。未来编译器器会更更加智能，届时⾃自动创建数组将成为可能</p>
<h2 id="useRef-保存引用值"><a href="#useRef-保存引用值" class="headerlink" title="useRef(保存引用值)"></a>useRef(保存引用值)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myswiper = useRef(<span class="literal">null</span>);  </span><br><span class="line">&lt;Swiper ref=&#123;myswiper&#125;/&gt; </span><br></pre></td></tr></table></figure>

<h2 id="useReducer和useContext-减少组件层级"><a href="#useReducer和useContext-减少组件层级" class="headerlink" title="useReducer和useContext(减少组件层级)"></a>useReducer和useContext(减少组件层级)</h2><p> useReducer 是 useState 的代替方案，用于 state 复杂变化,useReducer 是单个组件状态管理，组件通讯还需要 props</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">var</span> GlobalContext= React.createContext()</span><br><span class="line"><span class="comment">// 注意此时的reduecer 返回值是一个对象 &#123;isShow:false,list:[]&#125;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params">props</span>)</span>&#123;</span><br><span class="line"> </span><br><span class="line">  <span class="keyword">let</span> [state,dispatch]  = useReducer(reducer,&#123;<span class="attr">isShow</span>:<span class="literal">true</span>,<span class="attr">list</span>:[]&#125;)</span><br><span class="line">  <span class="keyword">return</span>  <span class="xml"><span class="tag">&lt;<span class="name">GlobalContext.Provider</span> <span class="attr">value</span>=<span class="string">&#123;&#123;</span></span></span></span><br><span class="line"><span class="xml">    dispatch</span></span><br><span class="line"><span class="xml"> &#125;&#125;&gt;</span></span><br><span class="line">    &lt;div&gt;</span><br><span class="line">     &#123;</span><br><span class="line">        state.isShow?</span><br><span class="line">        &lt;div &gt;我是选项卡&lt;/div&gt;</span><br><span class="line">       :null</span><br><span class="line">     &#125;</span><br><span class="line">     &#123;props.children&#125;</span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="xml">  <span class="tag">&lt;/<span class="name">GlobalContext.Provider</span>&gt;</span></span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Detail</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> &#123;dispatch&#125; = useContext(GlobalContext)</span><br><span class="line">  useEffect(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">//隐藏</span></span><br><span class="line">    dispatch(&#123;</span><br><span class="line">      type:<span class="string">&quot;Hide&quot;</span>,</span><br><span class="line">      payload:<span class="literal">false</span></span><br><span class="line">   &#125;)</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">//显示</span></span><br><span class="line">      dispatch(&#123;</span><br><span class="line">        type:<span class="string">&quot;Show&quot;</span>,</span><br><span class="line">        payload:<span class="literal">true</span></span><br><span class="line">     &#125;)</span><br><span class="line">   &#125;;</span><br><span class="line"> &#125;, [])</span><br><span class="line">  <span class="keyword">return</span> &lt;div&gt;</span><br><span class="line">    detail</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="React-forwardRef的使用方式"><a href="#React-forwardRef的使用方式" class="headerlink" title="React.forwardRef的使用方式"></a>React.forwardRef的使用方式</h2><p>引用传递（Ref forwading）是一种通过组件向子组件自动传递 引用ref 的技术。对于应用者的大多数组件来说没什<br>么作用。但是对于有些重复使用的组件，可能有用。例如某些input组件，需要控制其focus，本来是可以使用ref来<br>控制，但是因为该input已被包裹在组件中，这时就需要使用Ref forward来透过组件获得该input的引用。可以透传<br>多层</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component,forwardRef &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">App_forwardRef</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  mytext=React.createRef()</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">      &lt;button type=<span class="string">&quot;button&quot;</span> onClick=&#123;<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.mytext);</span><br><span class="line">        <span class="built_in">this</span>.mytext.current.value=<span class="string">&quot;2222&quot;</span></span><br><span class="line">      &#125;&#125;&gt;获取焦点&lt;/button&gt;</span><br><span class="line">      &lt;Child ref=&#123;<span class="built_in">this</span>.mytext&#125;/&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//这里Child是函数式组件</span></span><br><span class="line"><span class="keyword">const</span> Child=forwardRef(<span class="function">(<span class="params">props,ref</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;input defaultValue=<span class="string">&quot;11111&quot;</span> ref=&#123;ref&#125;&gt;&lt;/input&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="react-useImperativeHandle的使用"><a href="#react-useImperativeHandle的使用" class="headerlink" title="react  useImperativeHandle的使用"></a>react  useImperativeHandle的使用</h2><p><code>useImperativeHandle(ref, createHandle, [deps])</code><br>useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">FancyInput</span>(<span class="params">props, ref</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> inputRef = useRef();</span><br><span class="line">  useImperativeHandle(ref, <span class="function">() =&gt;</span> (&#123;</span><br><span class="line">    focus: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">      inputRef.current.focus();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;));</span><br><span class="line">  <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">input</span> <span class="attr">ref</span>=<span class="string">&#123;inputRef&#125;</span> <span class="attr">...</span> /&gt;</span></span>;</span><br><span class="line">&#125;</span><br><span class="line">FancyInput = forwardRef(FancyInput);</span><br><span class="line"></span><br><span class="line"><span class="comment">//渲染s时 &lt;FancyInput ref=&#123;inputRef&#125; /&gt; 的父组件可以调用 inputRef.current.focus()。</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/25/react%E7%AC%94%E8%AE%B0/React-Redux/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/25/react%E7%AC%94%E8%AE%B0/React-Redux/" class="post-title-link" itemprop="url">react-redux</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-25 10:07:09" itemprop="dateCreated datePublished" datetime="2020-10-25T10:07:09+08:00">2020-10-25</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2023-03-20 16:54:47" itemprop="dateModified" datetime="2023-03-20T16:54:47+08:00">2023-03-20</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="React-Redux应用"><a href="#React-Redux应用" class="headerlink" title="React-Redux应用"></a>React-Redux应用</h2><h3 id="1-为什么需要高阶组件"><a href="#1-为什么需要高阶组件" class="headerlink" title="1.为什么需要高阶组件"></a>1.为什么需要高阶组件</h3><p>我们先看一个非常常见的例子，一个输入框需要从本地获取数据将获取的数据放到输入框内</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Username</span> <span class="keyword">extends</span> <span class="title">React</span>.<span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>();</span><br><span class="line">    <span class="built_in">this</span>.state = &#123;<span class="attr">val</span>:<span class="string">&#x27;&#x27;</span>&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> username = <span class="built_in">localStorage</span>.getItem(<span class="string">&#x27;username&#x27;</span>)||<span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="built_in">this</span>.setState(&#123;</span><br><span class="line">      val:username</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> &lt;div&gt;</span><br><span class="line">      &lt;input type=<span class="string">&quot;text&quot;</span> value=&#123;<span class="built_in">this</span>.state.val&#125; onChange=&#123;<span class="function">()=&gt;</span>&#123;&#125;&#125;/&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>这段逻辑可能在Password组件中也要使用，那么从本地存储中获取数据放到输入框内的逻辑应该就是公用逻辑。这时我们就要使用高阶组件，也就是将组件在原有的基础上进行包装。</p>
</blockquote>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/10/25/react%E7%AC%94%E8%AE%B0/React-Redux/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




    


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="">
    <link itemprop="mainEntityOfPage" href="https://gz1234.gitee.io/2020/10/24/react%E7%AC%94%E8%AE%B0/Redux%E6%B7%B1%E5%85%A5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="郭泽">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="郭泽">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="undefined | 郭泽">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          <a href="/2020/10/24/react%E7%AC%94%E8%AE%B0/Redux%E6%B7%B1%E5%85%A5/" class="post-title-link" itemprop="url">react Redux深入</a>
        </h2>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2020-10-24 10:07:09" itemprop="dateCreated datePublished" datetime="2020-10-24T10:07:09+08:00">2020-10-24</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar-check"></i>
      </span>
      <span class="post-meta-item-text">更新于</span>
      <time title="修改时间：2022-09-26 15:10:43" itemprop="dateModified" datetime="2022-09-26T15:10:43+08:00">2022-09-26</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">分类于</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/react/" itemprop="url" rel="index"><span itemprop="name">react</span></a>
        </span>
    </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
          <h2 id="Redux深入"><a href="#Redux深入" class="headerlink" title="Redux深入"></a>Redux深入</h2><h3 id="1-redux文件拆分"><a href="#1-redux文件拆分" class="headerlink" title="1.redux文件拆分"></a>1.redux文件拆分</h3><p>我们将计数器的案例进行文件拆分,使代码更加容易维护和阅读,我们来增加一个store文件夹</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">store</span><br><span class="line">    │  action-types.js</span><br><span class="line">    │  index.js</span><br><span class="line">    │</span><br><span class="line">    ├─actions</span><br><span class="line">    │      counter.js</span><br><span class="line">    │</span><br><span class="line">    └─reducer</span><br><span class="line">            counter.js</span><br></pre></td></tr></table></figure>

<ul>
<li><p>action-types用来存放需要的常量</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">export const ADD &#x3D; &#39;ADD&#39;;</span><br><span class="line">export const MINUS &#x3D; &#39;MINUS&#39;;</span><br></pre></td></tr></table></figure>
</li>
<li><p>counter中存放reducer的逻辑</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">import * as Types from &#39;..&#x2F;action-types&#39;</span><br><span class="line">export default function reducer(state&#x3D;&#123;number:0&#125;,action) &#123;</span><br><span class="line">  switch (action.type)&#123;</span><br><span class="line">    case Types.ADD:</span><br><span class="line">      return &#123;number:state.number + action.amount&#125;;</span><br><span class="line">    case Types.MINUS:</span><br><span class="line">      return &#123;number:state.number - action.amount&#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  return state;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li></ul>
          <!--noindex-->
            <div class="post-button">
              <a class="btn" href="/2020/10/24/react%E7%AC%94%E8%AE%B0/Redux%E6%B7%B1%E5%85%A5/#more" rel="contents">
                阅读全文 &raquo;
              </a>
            </div>
          <!--/noindex-->
        
      
    </div>

    
    
    

    <footer class="post-footer">
        <div class="post-eof"></div>
      
    </footer>
  </article>
</div>




  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/page/4/"><i class="fa fa-angle-left" aria-label="上一页"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/6/"><i class="fa fa-angle-right" aria-label="下一页"></i></a>
  </nav>

</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">郭泽</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script>

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.0/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/js/third-party/search/local-search.js"></script>

  <script class="next-config" data-name="pdf" type="application/json">{"object_url":{"url":"https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js","integrity":"sha256-tu9j5pBilBQrWSDePOOajCUdz6hWsid/lBNzK4KgEPM="},"url":"/lib/pdf/web/viewer.html"}</script>
  <script src="/js/third-party/tags/pdf.js"></script>

  <script class="next-config" data-name="mermaid" type="application/json">{"enable":true,"theme":{"light":"default","dark":"dark"},"js":{"url":"https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.3/mermaid.min.js","integrity":"sha256-TIYL00Rhw/8WaoUhYTLX9SKIEFdXxg+yMWSLVUbhiLg="}}</script>
  <script src="/js/third-party/tags/mermaid.js"></script>

  <script src="/js/third-party/fancybox.js"></script>


  





</body>
</html>
